<template>
  <div class="page">
    <header class="header">选择特征</header>
    <div class="content">
      <van-tabs v-model="active" swipeable>
        <van-tab v-for="(k, index) in arr" :key="index" :title="k">
          <h3>{{k}}</h3>
          <div class="show">
            <p>
              <span>请选择符合的特征或病症，</span>
              <span style="color: red">支持单选，无则返回</span>
            </p>
            <div class="im" v-for="(item, index) in classify_list" :key="index">
              <van-checkbox-group v-show="active==index" v-model="checkboxchecked">
                <ul>
                  <li v-for="(row, i) in item.items" :key="i">
                    <label>
                      <img :src="row.main_visceral_image" alt @click="imgC(row)" />
                      <van-checkbox :name="row.id" class="im-checkbox"></van-checkbox>
                    </label>
                  </li>
                </ul>
              </van-checkbox-group>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <van-button class="btn" type="primary" @click="handleBtn">生成报告</van-button>
    </div>
    <!-- 特征弹框详情 -->
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '30%' }">
      <!-- <h5 v-for="(item, attr) in classify_list" :key="attr">
        <h5 v-for="(item3, attr) in item.items" :key="attr">
          <img :src="show_img" alt="" style="width: 50px; height: 50px" />
          <span>{{ show_con }}</span>
        </h5>
      </h5>-->
      <!-- </h5> -->
      <h5 v-for="(item3, attr) in [item3]" :key="attr">
        <span>{{item3.main_visceral}}</span>
        
        <van-checkbox-group v-model="checkboxchecked">
            <label  @click="show=false">
              选择
              <van-checkbox :name="item3.id" class="im-checkbox"  style="opacity: 0;"></van-checkbox>
            </label>
        </van-checkbox-group>

        <img :src="item3.main_visceral_image" alt style="width: 50px; height: 50px" />
        <span>{{ item3.main_visceral_language }}</span>
      </h5>
    </van-popup>
  </div>
</template>
<script>
import { furtherTongueReport } from "../../utils/api";
import { Toast } from "vant";
export default {
  watch: {
    active(newValue) {
      console.log(newValue, "newValue");
      this.checkboxchecked = [];
    }
  },
  data() {
    return {
      checkboxchecked: [],
      active: 0,
      arr: [],
      show: false,
      show_img: "",
      show_data: {},
      classify_list: [], //["面部", "手部", "病症"],
      item3: []
    };
  },
  // 页面挂在
  mounted() {
    this.getList();
  },
  methods: {
    imgC(item3) {
      console.log(item3.main_visceral_language, "aaaa");
      this.show = true;
      this.item3 = item3;
      // let aa = item3.main_visceral_language
      // this.show_con = item3.main_visceral_language;
      // this.show_img = item3.main_visceral_image;
      // console.log(this.show_img, "imh");
    },
    async getList() {
      try {
        const resp = JSON.parse(this.$route.query.resp);
        console.log(resp, "resp");
        const { data } = resp;
        const { classify_list } = data;
        this.classify_list = classify_list;
        const arr = classify_list.map(item => item.desc);
        this.arr = arr;
        // for(let item of classify_list) {
        //   this.classify_list.push(item.desc)
        // }
        console.log(this.classify_list, "====xx222x");
      } catch (err) {
        console.log(err);
      }
    },
    async handleBtn() {
      // 目前是选一个的。
      let result = {};
      const { checkboxchecked, classify_list } = this;
      console.log(classify_list,'classify_list');
      if (!checkboxchecked.length) return Toast(`请先选病情特征`);
      for (let i = 0; i < classify_list.length; i++) {
        for (let k = 0; k < classify_list[i].items.length; k++) {
          if (checkboxchecked.includes(classify_list[i].items[k].id))
      
            result = classify_list[i].items[k];
            console.log(result,'result')
          break;
        }
      }
      const params = {
        image_url: result.main_visceral_image,
        main_visceral: result.main_visceral,
        uid: "20140001",
        vice_visceral: result.vice_visceral,
        visceral_type: result.visceral_type
      };
      console.log('打印参数',params)
      try {
        const res = await furtherTongueReport(params);
        const resp = JSON.stringify(res.data);
        const { data } = res;
        const { msg } = data;
        let query = {
          resp
        };
        if (msg == "succeed") {
          Toast.success("生成报告成功");
          this.$router.push({
            path: "/tongue/reportResult",
            query
          });
        } else {
          Toast(msg);
        }
      } catch (err) {
        // console.log(err);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.show p {
  margin: 10px 0;
}
.page {
  background: rgb(250, 252, 251);
  //min-height: 100vh;
  /deep/.van-tab {
    background: rgb(3, 223, 197);
    color: #fff;
  }
}
.header {
  background: rgb(3, 223, 197);
  color: #fff;
  padding: 0.8rem 0 1.8rem 0.4rem;
  text-align: center;
  font-size: 18px;
}
.content {
  position: relative;
  top: -1rem;
  width: 9rem;
  margin: 0 auto;
  .im {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      flex-flow: row wrap;
      li {
        position: relative;
        width: 4.1rem;
        height: 4.1rem;
        label {
          width: 100%;
          height: 100%;
          img {
            margin-right: 10px;
          }
        }
        .im-checkbox {
          position: absolute;
          right: 20px;
          top: 15px;
        }
      }
    }
    img {
      margin-right: 15px;
      border: 5px solid gray;
      border-radius: 15px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .btn {
    width: 100%;
    height: 1rem;
    background: rgb(2, 207, 128);
    color: #fff;
    display: block;
    text-align: center;
    line-height: 1rem;
    border-radius: 1rem;
    margin-top: 15px;
  }
}
</style>
